<template>
  <div class="f-menu" :style="{ width: blogStore.asideWidth }">
    <el-menu
    :default-active="defaultActive"
        class="el-menu-vertical-demo menu"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
        <template v-for="menu in menus" :key="menu.id">
          <el-sub-menu :index="String(menu.id)" v-if="menu.children&&menu.children.length>0">
            <template #title>
              <el-icon>
                <component :is="menu.icon"></component>
              </el-icon>
              <span>{{menu.name}}</span>
            </template>
            <el-menu-item
              v-for="son in menu.children"
              :key="son.id"
              :index="son.path"
            >
              <el-icon>
                <component :is="son.icon"></component>
              </el-icon>
              <span>{{ son.name }}</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item v-else :index="menu.path">
            <el-icon>
              <component :is="menu.icon"></component>
            </el-icon>
            <span>{{ menu.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
   
  </div>
</template>
<script lang="ts" setup>
import { useBlogStore } from "@/store/blog";
import { useUserStore } from "@/store/user";
import { computed, ref } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
const router = useRouter();
const route = useRoute();
const userStore=useUserStore()
const blogStore=useBlogStore()
const menus=userStore.user.userinfo.menus

// 默认选中
const defaultActive = ref(route.path);

// 监听路由变化
onBeforeRouteUpdate((to) => {
  defaultActive.value = to.path;
});

// 是否折叠
const isCollapse = computed(() => !(blogStore.asideWidth == "250px"));

</script>
<style scoped>
.f-menu {
  transition: all 0.2s;
  top: 64px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  background-color: rgb(253, 253, 253);
}
/* .f-menu::-webkit-scrollbar {
  width: 3px;
} */
.menu {
  height: 100%;
}
</style>
